npm<template>
    <div class="shangpin">
        <!--        状态-->
        <div class="topLi cf">状态:</div>
        <div @click="change0" :style="{color:color0,backgroundColor:bc0}" class="topLi cf">{{arr[0]}}</div>
        <div @click="change1" :style="{color:color1 , backgroundColor:bc1}" class="topLi cf">{{arr[1]}}</div>
        <div @click="change2" :style="{color:color2, backgroundColor:bc2}" class="topLi cf">{{arr[2]}}</div>
        <!--       门店搜索 -->
        <span class="from">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商品名称:">
                <el-input v-model="formInline.name"></el-input>
            </el-form-item>
                <el-form-item label="所属门店:">
                <el-input v-model="formInline.mendian"></el-input>
            </el-form-item>
                <!--                //日期-->
                <el-form-item label="发布日期:">
                    <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                                </el-date-picker>
                </el-form-item>

                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>






        <!--        门店列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">
                <el-table-column
                        prop="goods_id"
                        label="商品ID">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        label="商品">
                </el-table-column>
                <el-table-column
                        prop="shop_name"
                        label="所属门店">
                </el-table-column>
                <el-table-column
                        prop="sales_volume"
                        label="销量">
                </el-table-column>
                <el-table-column
                        prop="goods_present_price"
                        label="预估价">
                </el-table-column>
                <el-table-column
                        prop="add_time"
                        label="发布时间">
                </el-table-column>
                <el-table-column
                        prop="goods_status"
                        label="状态">
                    <template slot-scope="scope">
                        <span class="span1" v-if = "scope.row.goods_status =='上架中'" style="font-size: 12px;  color: #1890FF">上架中</span>
                        <span class="span1" v-else-if = 'scope.row.goods_status =="已下架"' style="font-size: 12px;  color: #1890FF">已下架</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">
                            <span v-if="scope.row.goods_status =='已下架'">上架</span>
                            <span v-else-if="scope.row.goods_status =='上架中'">下架</span></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>


      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems">
      </el-pagination>



    </div>
</template>

<script>
    export default {
        name: "ShangPinComponent",
        data(){
            return{
              currentPage: 1,
              pageSize: 3,
              totalItems: 25,



                arr:["全部门店", "上架中", "已下架"],
                color0:"#fff",
                color1:"#000",
                color2:"#000",
                bc0:"",
                bc1:"",
                bc2:"",
                index:"",
                value1: '',
                tableData:[],
                formInline: {
                    name: '',
                    mendian: ''
                },
                formLabelWidth: '120px',
                form:{
                    goods_id:"",
                    goods_name:"",
                    goods_image: "",
                    goods_presentPrice:"",
                    shop_id:"",
                    goods_status:"",
                    shop_category_id:"",
                    add_time: "",
                    goods_unit: "",
                    goods_cart_count:"",
                    goods_shop_name: "",
                    goods_sales_volume: "",
                    zhuangtai:""
                },
            }
        },
        created() {
            this.refresh()
        },
        methods:{



          handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.refresh();
          },
          handleCurrentChange(newPage) {
            this.currentPage = newPage;
            this.refresh();
          },

          refresh(){
            this.axios.get('http://localhost:8080/PangHuDaoJia_Web_exploded/fenyegoodslist', {
              params: {
                pageNumber: this.currentPage,
                pageSize: this.pageSize
              }
            })
                .then(response => {
                  this.totalItems = response.data.int;
                  this.tableData = response.data.list;
                  this.changezhuangtai()
                  // 根据后端返回的数据更新表格数据
                })
                .catch(error => {
                  console.error(error);
                })
          },






            change0(){
                this.color0 = "#fff"
                this.color1 = "#000"
                this.color2 = "#000"
                this.bc0 = "#1890FF"
                this.bc1 = "#fFF"
                this.bc2 = "#fFF"
                this.refresh()

            },
            change1(){
                this.color1 = "#fff"
                this.color0 = "#000"
                this.color2 = "#000"
                this.bc0 = "#fFF"
                this.bc1 = "#1890FF"
                this.bc2 = "#fFF"
                this.axios.get("http://localhost:8080/PangHuDaoJia_Web_exploded/status?goods_status=1").then((res)=>{
                const params = new URLSearchParams(window.location.search);
                const good_status = params.get('goods_status');
                console.log(good_status)
                this.tableData = res.data.list
                this.changezhuangtai()
                })
            },
            change2(){
                this.color2 = "#fff"
                this.color1 = "#000"
                this.color0 = "#000"
                this.bc0 = "#fFF"
                this.bc1 = "#fFF"
                this.bc2 = "#1890FF"
                this.axios.get("http://localhost:8080/PangHuDaoJia_Web_exploded/status?goods_status=0").then((res)=>{
                const params = new URLSearchParams(window.location.search);
                const good_status = params.get('goods_status');
                console.log(good_status)
                this.tableData = res.data.list
                this.changezhuangtai()
                })
            },
            //刷新



            //状态数字改字
            changezhuangtai(){
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].goods_status == 1){
                        this.tableData[i].goods_status = "上架中"
                    }else if (this.tableData[i].goods_status == 0){
                        this.tableData[i].goods_status = "已下架"
                    }

                }
            },
            //搜索日期
            onSubmit() {
                this.axios.get("http://localhost:8080/PangHuDaoJia_Web_exploded/sousuo", {
                    params:{
                        pageNum:1,
                        pageSize:10,
                        goodsName:this.formInline.name,
                        shopName:this.formInline.mendian,
                        startTime: this.getDateString(this.value1[0]),
                        endTime:this.getDateString(this.value1[1]),
                        goodsStatus:this.form.goodsStatus,
                    }
                }).then(res=>{
                    this.allObj = res.data;
                    this.tableData = res.data.list;
                }).catch(err=>{

                })
            },
            //状态转换
            handleClick(index){
                this.form.goods_id = this.tableData[index].goods_id;
                this.form.goods_status = this.tableData[index].goods_status;
                if (this.tableData[index].goods_status == "上架中"){
                    this.axios.post("http://localhost:8080/PangHuDaoJia_Web_exploded/change",{
                        goods_id:this.form.goods_id,
                        goods_status:0,
                    }).then(()=>{}).catch(()=>{})
                    }else if (this.tableData[index].goods_status == "已下架"){
                    this.axios.post("http://localhost:8080/PangHuDaoJia_Web_exploded/change",{
                        goods_id:this.form.goods_id,
                        goods_status:1,
                    }).then(()=>{}).catch(()=>{})
                }
                setTimeout(this.refresh,350)
            },
            //封装日期转为字符串的函数
            getDateString(date){
                let yy = date.getFullYear();
                let mm = date.getMonth()+1;
                let dd = date.getDate();
                let hh = date.getHours();
                let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds();
                let str = yy + "-" + mm + "-" + dd +" " + hh + ":" + mf + ":" + ss;
                return str;
            },
        }

    }
</script>

<style scoped>
    .shangpin{
        padding: 20px;
    }
    .tL{
        padding: 10px 15px;
    }
    .topLi{
        float: left;
        padding: 10px 15px;
    }
    .topLi:nth-of-type(2){
        color: #ffffff;
        background-color: #1890FF;
        border-bottom-left-radius: 8px;
        border-top-left-radius: 8px;
    }
    .topLi:nth-of-type(4){
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        margin-right: 15px;
    }
</style>